<template>
  <div class="types">
    <div class="input-serch border-bottom">
      <input type="text" @keydown.enter="serch" placeholder="回车搜索商品">
    </div>
    <div class="content">
      <div class="content-left border-right" >
          <div :class="['leftnav-title','leftnav-all']" @click="typeAll">所有分类</div>
          <div :class="['leftnav-title']" v-for="(item,index) in typeArry" :key="item.id" @click="typeClick(item,index)" ref="type">{{item.name}}</div>
      </div>
      <div class="content-right">
          <div class="content-swiper">
            <swiper height="3rem" :aaa="swiper"></swiper>
          </div>
          <div class="content-div">
              <div class="content-text" v-for="item in list" :key="item.id" @click="toclassGoods(item.id)"> 
                <div class="content-img">
                  <img :src="item.icon" alt="">
                </div>
                <p>
                  {{item.name}}
                </p>
              </div>
          </div>
      </div>
    </div>
 </div>
</template>

<script>
import leftNav from '../../components/bottomNav/leftNav.vue'
import swiper from '../../components/swiper/swiper'
import {getTypes} from '../../utils/api/index'
export default {
  name: 'types',
  data() { 
    return {
      list:[],
      typeArry:[],
      oldlist:[],
      swiper:[
        {
          picUrl:'/1.jpg'
        },
        {
          picUrl:'/2.jpg'
        },
        {
          picUrl:'/3.jpg'
        },
        ]
    }
  },
  created() {
    getTypes().then(res=>{
      this.list= res
      this.oldlist = JSON.stringify(this.list)
      this.typeArry = res.filter(item => {
        return item.level === 1
      });
      console.log(this.list);
    })
  },
  methods:{
    typeClick(txt,i){
      var arr = JSON.parse(this.oldlist) 
      this.list = arr.filter(item=>{
        return  item.type.includes(txt.type)
      })
      // this.$refs.type[i].className="leftnav-title  bot-left"
      // console.log(this.$refs.type[]);
      this.$refs.type.forEach((item,index)=>{
        if(index === i){
          item.className = "leftnav-title  bot-left"
        }else{
          item.className = "leftnav-title"
        }
      })
    },
    typeAll(){
      this.list = JSON.parse(this.oldlist)
      // this.$refs.type.className = "leftnav-title"
      this.$refs.type.forEach((item,index)=>{
          item.className = "leftnav-title"
      
      })
    },
    serch(e){
      var arr = JSON.parse(this.oldlist) 
      this.list = arr.filter(item=>{
        return  item.name.includes(e.target.value)
      })
    },
    toclassGoods(id){
      this.$router.push({
        name:'classgoods',
        query:{
          id
        }
      })
    }
  },
  components:{
    leftNav,
    swiper
  }
 }
</script>
<style lang="scss" scoped>
.types{
  width: 100%;
  height: 100%;
  .input-serch{
    width: 100%;
    height: 0.8rem;
    input{
      width: 60%;
      height: 0.5rem;
      border-radius: 0.8rem;
      background-color: #f6f6f6;
      font-size: 0.24rem;
      border: none;
      position: absolute;
      top: 0.1rem;
      left: 0.4rem;
      text-indent: 0.2rem;
    }
  }
}
.bot-left{
  border-left:2px solid red; 
}
.leftnav-all:hover{
  border-left:2px solid red; 
}
.content{
  width: 100%;
  height: calc(100% - 0.8rem);
  display: flex;
  .content-left{
    width: 2rem;
    height: 100%;
    font-size: 0.26rem;
  }
  .content-right{
    width: calc(100% - 2rem);
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
  }
}
.leftnav-title{
    width: 100%;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
}
.content-swiper{
  width: 100%;
  height: 3rem;
  background-color: coral;
  box-sizing: border-box;
  border-radius: 0.2rem;

}
.content-div{
  width: 100%;
  display: flex;
  padding: 0.2rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.content-text{
  width: 30%;
  height: 1.98rem;
  text-align: center;
  font-size: 0.28rem;
  .content-img{
    width: 100%;
    height: 80%;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>